<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			#box input {
				width: 60px;
				height: 30px;
			}
			
			.active {
				background: red;
			}
			
			#box div {
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				display: none;
				font-size: 100px;
				text-align: center;
				line-height: 200px;
			}
			
			#box .show {
				display: block;
			}
		</style>
		<script>
			window.onload = function() {
				//实例化一个原型对象
				var tab1 = new Tab('box');
			}
			//创建原型对象
			function Tab(id) {
				this.oDiv = document.getElementById(id);
				this.aInp = this.oDiv.getElementsByTagName('input');
				this.aDiv = this.oDiv.getElementsByTagName('div');
				var th = this;
				for (var i = 0; i < this.aInp.length; i++) {
					this.aInp[i].index = i;
					this.aInp[i].onclick = function() {
						th.change(this);
					}
				}
			}
			//原型对象中添加方法
			Tab.prototype.change = function(obj) {
				for (var i = 0; i < this.aInp.length; i++) {
					this.aInp[i].className = "";
					this.aDiv[i].className = "";
				}
				obj.className = "active";
				this.aDiv[obj.index].className = "show";
			}
		</script>
	</head>

	<body>
		<div id="box">
			<input type="button" value="1" class "active"/>
			<input type="button" value="2" />
			<input type="button" value="3" />
			<div class="show">111</div>
			<div>222</div>
			<div>333</div>
		</div>
	</body>

</html>